<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 筛选 -->
        <div>
        <!-- 新增按钮 -->
          <div class="add_btn">
            <el-row type="flex" justify="end">
            <el-button type="success" icon="el-icon-edit" size="small" @click="$router.push('/questions/new')">新增试题</el-button>
          </el-row>
          </div>
        <!-- 筛选表单 -->
          <el-form :model="questionsForm" ref="questionsForm" label-width="80px">
            <el-row>
              <el-col :span="6">
                <el-form-item label="学科" prop="subjectID">
                  <el-select v-model="questionsForm.subjectID" placeholder="请选择" size="small" @change="changeSubject">
                    <el-option
                      v-for="item in subjectsList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item >
              </el-col>
              <el-col :span="6">
                <el-form-item label="二级目录" prop="catalogID">
                  <el-select v-model="questionsForm.catalogID" placeholder="请选择" size="small" @change="changeCatalog">
                    <el-option
                      v-for="item in dirsimpleList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="标签" prop="tags">
                  <el-select v-model="questionsForm.tags" placeholder="请选择" size="small" @change="changeTags">
                    <el-option
                      v-for="item in tagsList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="关键字" prop="keyword">
                  <el-input size="small" v-model="questionsForm.keyword" placeholder="根据题干搜索"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="试题类型" prop="questionType">
                  <el-select v-model="questionsForm.questionType" placeholder="请选择" size="small">
                    <el-option
                      v-for="item in this.questionTypeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="难度" prop="difficulty">
                  <el-select v-model="questionsForm.difficulty" placeholder="请选择" size="small">
                    <el-option
                      v-for="item in this.difficultyList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="方向" prop="direction">
                  <el-select v-model="questionsForm.direction" placeholder="请选择" size="small">
                    <el-option
                      v-for="item in this.directionList"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="录入人" prop="creatorID">
                  <el-select v-model="questionsForm.creatorID" placeholder="请选择" size="small">
                    <el-option
                      v-for="item in this.creatorList"
                      :key="item.id"
                      :label="item.username"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="题目备注" prop="remarks">
                  <el-input v-model="questionsForm.remarks" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="企业简称" prop="enterpriseID">
                  <el-input v-model="questionsForm.        enterpriseID" size="small"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="城市">
                  <el-select @change="changeCity" v-model="questionsForm.city" placeholder="请选择" size="small" style="width: 48%; margin-right: 2%">
                    <el-option
                      v-for="item in cityList"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                  <el-select placeholder="请选择" v-model="questionsForm.area" size="small" style="width: 50%">
                    <el-option
                      v-for="item in areaList"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-row type="flex" justify="end">
                    <el-button size="small" @click="clearData">清除</el-button>
                  <el-button size="small" type="primary" @click="hQuery">搜索</el-button>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 警告 -->
        <el-alert type="info" show-icon :closable="false" style="margin-bottom: 15px;">数据一共{{count}}条</el-alert>
        <!-- 表格 -->
        <el-table :data="questionsList">
          <el-table-column label="试题编号" width="120" prop="number"></el-table-column>
          <el-table-column label="学科" width="80" prop="subject"></el-table-column>
          <el-table-column label="目录" width="80" prop="catalog"></el-table-column>
          <el-table-column label="题型" width="80" prop="questionType">
            <template #default={row}>
              <span>{{ row.questionType === '1' ? '单选' : row.questionType === '2' ? '多选' : '简答题' }}</span>
            </template>
            </el-table-column>
          <el-table-column label="题干" width="280" prop="question">
            <template #default={row}>
              <div v-html="row.question"></div>
            </template>
          </el-table-column>
          <el-table-column label="录入时间" width="180" prop="addDate">
             <template #default={row}>
            {{$moment(row.addDate).format("YYYY-MM-DD HH:mm:ss")}}
            </template>
          </el-table-column>
          <el-table-column label="难度" width="80" prop="difficulty">
            <template #default={row}>
              <span>{{ row.difficulty === '1' ? '简单' : row.difficulty === '2' ? '一般' : '困难' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="录入人" width="80" prop="creator"></el-table-column>
          <el-table-column label="操作" width="180">
            <template #default={row}>
              <!-- 预览 -->
              <el-button type="primary" icon="el-icon-view" circle plain size="small" @click="previewClick(row.id)"></el-button>
              <!-- 修改 -->
              <el-button type="success" icon="el-icon-edit" circle plain size="small" @click="$router.push(`/questions/new?id=${row.id}`)"></el-button>
              <!-- 删除 -->
              <el-button type="danger" icon="el-icon-delete" circle plain size="small" @click="delQuestion(row.id)"></el-button>
              <!-- 加入精选 -->
              <el-button type="warning" icon="el-icon-check" circle plain size="small" @click="addChoices(row.id)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          style="margin-top: 20px; text-align: right;"
          background
          layout="prev, pager, next, sizes, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="questionsForm.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="questionsForm.pagesize"
          :total="count"
          >
        </el-pagination>
      </el-card>
    </div>
    <!-- 预览组件 -->
    <questions-preview
    ref="previewList"
    :showDialog.sync="showDialog"
    :currentId="currentId"
    ></questions-preview>
  </div>
</template>

<script>
import { list as questionList, remove as questionRemove, choiceAdd } from '@/api/hmmm/questions'
import { simple as SubjectsList } from '@/api/hmmm/subjects'
import { dirsimple } from '@/api/hmmm/directorys'
import { tagsList } from '@/api/hmmm/tags'
import { provinces, citys } from '@/api/hmmm/citys'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { list as creatorList } from '@/api/base/users'
import QuestionsPreview from '../components/questions-preview'
export default {
  components: {
    QuestionsPreview
  },
  data () {
    return {
      questionsForm: {
        page: 1, // 当前页数
        pagesize: 5, // 页尺寸
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        enterpriseID: '', // 企业简称
        city: '', // 市
        area: '' // 区
      }, // 表单
      questionsList: [], // 表格试题列表
      count: 1, // 总记录数
      subjectsList: [], // 学科列表
      dirsimpleList: [], // 二级目录
      tagsList: [], // 标签列表
      questionTypeList: questionType, // 题型
      difficultyList: difficulty, // 难度
      directionList: direction, // 方向
      creatorList: [],
      cityList: [], // 市列表
      areaList: [], // 区列表
      pages: 1, // 总页数
      showDialog: false, // 弹层
      currentId: null
    }
  },
  created () {
    // 表格试题列表
    this.getQsList()
    // 学科
    this.getSubjectsList()
    // 录入人
    this.getCreatorList()
    // 城市
    this.getCityList()
  },
  methods: {
    // 点击预览
    async previewClick (id) {
      // console.log(id)
      this.showDialog = true
      this.currentId = id
      this.$nextTick(() => {
        this.$refs.previewList.getDetail()
      })
    },
    // 点击加入
    addChoices (addId) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.addChoice(addId, 1)
        this.$message.success('加入精选题库成功!')
        this.$router.push('/questions/choice')
      }).catch(() => {
      })
    },
    // 加入精选接口
    async addChoice (currentId, state) {
      await choiceAdd({
        id: currentId,
        choiceState: state
      })
    },
    // 点击删除
    delQuestion (qsId) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delQuestions(qsId)
        this.$message.success('删除成功!')
        this.getQsList()
      }).catch(() => {
      })
    },
    // 删除试题接口
    async delQuestions (id) {
      await questionRemove({ id })
    },
    buildParams () {
      const paramsObj = {}
      const { page, pagesize, subjectID, catalogID, tags, keyword, questionType, difficulty, direction, creatorID, remarks, enterpriseID, city, area } = this.questionsForm
      // 如果某一个参数是null,则axios就不会发这个参数
      // 如果某一个参数是""，axios是会发出这个参数
      paramsObj.page = page || null
      paramsObj.pagesize = pagesize || null
      paramsObj.tags = tags || null
      paramsObj.subjectID = subjectID || null
      paramsObj.catalogID = catalogID || null
      paramsObj.keyword = keyword || null
      paramsObj.questionType = questionType || null
      paramsObj.difficulty = difficulty || null
      paramsObj.direction = direction || null
      paramsObj.creatorID = creatorID || null
      paramsObj.remarks = remarks || null
      paramsObj.enterpriseID = enterpriseID || null
      paramsObj.city = city || null
      paramsObj.area = area || null
      return paramsObj
    },
    // 搜索信息
    hQuery () {
      this.questionsForm.page = 1
      this.getQsList()
    },
    // 更改每页显示条数
    handleSizeChange (currentPagesize) {
      // console.log('点击：'+page)
      this.questionsForm.pagesize = currentPagesize
      this.getQsList()
    },
    // 点击页
    handleCurrentChange (currentPage) {
      this.questionsForm.page = currentPage
      this.getQsList()
    },
    // 切换市
    changeCity (city) {
      this.questionsForm.area = ''
      this.getAreaList(city)
    },
    // 获取区列表
    async getAreaList (pname) {
      this.areaList = await citys(pname)
      // console.log(res)
    },
    // 获取市列表
    async getCityList () {
      this.cityList = await provinces()
      // console.log(res)
    },
    // 清除数据 重置表单
    clearData () {
      this.$refs.questionsForm.resetFields()
      this.dirsimpleList = []
      this.tagsList = []
      this.questionsForm.city = ''
      this.questionsForm.area = ''
      this.areaList = []
    },
    // 获取录入人
    async getCreatorList () {
      const { data } = await creatorList()
      // console.log(res)
      this.creatorList = data.list
    },
    // 切换二级目录
    changeCatalog (val) {
      this.questionsForm.catalogID = val
    },
    // 切换标签
    changeTags (val) {
      this.questionsForm.tags = val
    },
    // 切换学科
    changeSubject (val) {
      // console.log(val);
      this.questionsForm.subjectID = val
      this.questionsForm.catalogID = ''
      this.questionsForm.tags = ''
      this.getsubjectsSimpleList()
      this.getTags()
    },
    // 获取二级联动列表
    async getsubjectsSimpleList () {
      const { data } = await dirsimple(this.questionsForm.subjectID)
      // console.log(res)
      this.dirsimpleList = data
    },
    // 获取标签
    async getTags () {
      const { data } = await tagsList(this.questionsForm.subjectID)
      // console.log(res)
      this.tagsList = data
    },
    // 获取学科列表
    async getSubjectsList () {
      const { data } = await SubjectsList()
      // console.log(data)
      this.subjectsList = data
    },
    // 获取试题列表
    async getQsList () {
      const paramsObj = this.buildParams()
      try {
        const { data } = await questionList(paramsObj)
        // console.log(res)
        this.questionsList = data.items
        this.count = data.counts
        // console.log(this.questionsList)
        // console.log(data)
        this.pages = data.pages
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 0 10px;
  margin: 10px 0;
}
.add_btn {
  margin-bottom: 15px;
}
.el-table th {
  background-color: #fafafa;
}
</style>
